<template>
  <div id="app">
    <div class="app-header">
      <div class="container">
        <nav id="app-nav" class="navbar navbar-expand-lg bg-body-tertiary">
          <div class="container-fluid">
            <router-link to="/" class="logo">
              <img src="./static/imgs/icon/logo.png" alt="logo">
            </router-link>
            <button class="app-btn navbar-toggler" type="button" data-bs-toggle="offcanvas"
              data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="offcanvas offcanvas-start w-50" tabindex="-1" id="offcanvasNavbar"
              aria-labelledby="offcanvasNavbarLabel">
              <div class="offcanvas-header">
                <!-- <h5 class="offcanvas-title" id="offcanvasNavbarLabel">君惜泪的博客</h5> -->
                <router-link to="/" class="logo">
                  <img src="./static/imgs/icon/logo.png" alt="logo">
                </router-link>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
              </div>
              <div class="offcanvas-body">
                <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                  <li class="nav-item">
                    <router-link @click="isShowFn" class="my-nav-link text-light nav-link" active-class="active" to="/">
                      <!-- <i style="color:rgb(58, 164, 58)!important;" -->
                      <i class="bi bi-house-door-fill"></i><span>首页</span></router-link>
                  </li>
                  <li class="nav-item">
                    <router-link class="my-nav-link text-light ms-1 nav-link" active-class="active" to="/family">

                      <!-- <i style="color: rgb(247, 142, 159)!important;" -->
                      <i class="bi bi-calendar-heart-fill"></i>
                      <span>家</span></router-link>
                  </li>
                  <li class="nav-item">
                    <router-link class="my-nav-link text-light ms-1 nav-link" active-class="active" to="/note">
                      <i class="bi bi-journal-bookmark-fill"></i>
                      <span>随笔</span>
                    </router-link>
                  </li>
                  <!-- <li class="nav-item">
                    <router-link class="my-nav-link text-light ms-1 nav-link" active-class="active" to="/photo">
                      <i class="bi bi-camera-fill"></i>
                      <span>相册</span>
                    </router-link>
                  </li> -->
                  <li class="nav-item dropdown">
                    <a href="javascript:;" :class="{ active: activeTrue }"
                      class="my-nav-link dropdown-toggle text-light ms-1 nav-link" active-class="active" role="button"
                      data-bs-toggle="dropdown" aria-expanded="false">
                      <i class="bi bi-book-half"></i>
                      <span>学习</span>
                    </a>
                    <ul class="dropdown-menu">
                      <li>
                        <router-link class="dropdown-item" to="/article">文章列表</router-link>
                      </li>
                      <li>
                        <router-link class="dropdown-item" to="/studyPath">学习路线</router-link>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown">
                    <a href="javascript:;" :class="{ active: toolsTrue }"
                      class="my-nav-link dropdown-toggle text-light ms-1 nav-link" active-class="active" role="button"
                      data-bs-toggle="dropdown" aria-expanded="false">
                      <i class="bi bi-gear-fill"></i>
                      <span>工具箱</span>
                    </a>
                    <ul class="dropdown-menu">
                      <li>
                        <router-link class="dropdown-item" to="/weather?tools">天气查询</router-link>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <router-link class="my-nav-link text-light ms-1  nav-link" active-class="active" to="/message">
                      <i class="bi bi-chat-heart-fill"></i>
                      <span>留言</span>
                    </router-link>
                  </li>
                  <li class="nav-item">
                    <router-link class="my-nav-link text-light ms-1  nav-link" active-class="active" to="/AI">
                      <i class="bi bi-messenger"></i>
                      <span>AI助手</span>
                    </router-link>
                  </li>
                  <li class="nav-item">
                    <router-link class="my-nav-link text-light ms-1  nav-link" active-class="active" to="/login">
                      <i class="bi bi-box-arrow-in-right"></i>
                      <span>登录</span>
                    </router-link>
                  </li>
                  <li class="nav-item">
                    <router-link class="my-nav-link text-light ms-1  nav-link" active-class="active" to="/user">
                      <i class="bi bi-person-circle"></i>
                      <span>个人中心</span>
                    </router-link>
                  </li>
                </ul>
                <form class="app-form d-flex align-items-center ms-1">
                  <router-link active-class="active" to="/search">
                    <i class="bi bi-search"></i>
                  </router-link>
                </form>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <div v-if="equipment" class="app-footer">
      <div class="app-footer-bg text-center">
        <div class="box">
          <router-link to="/" active-class="active">
            <div> <i class="bi bi-house-door-fill"></i></div>
            首页
          </router-link>
        </div>
        <div class="box">
          <router-link to="/family" active-class="active">
            <div> <i class="bi bi-calendar-heart-fill"></i></div>
            家
          </router-link>
        </div>
        <div class="box">
          <router-link to="/note" active-class="active">
            <div><i class="bi bi-journal-bookmark-fill"></i></div>
            随笔
          </router-link>
        </div>
        <div class="box">
          <router-link to="/user" active-class="active">
            <div> <i class="bi bi-person-circle"></i></div>
            个人中心
          </router-link>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>


</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
// console.log(route);
//控制学习标题高亮
const activeTrue = ref<boolean>(false);
// 控制工具箱标题高亮
const toolsTrue = ref<boolean>(false);
const isShow = ref<boolean>(false);

// 设备
const equipment = ref<boolean>(false);

// 获取设备信息
const equipmentFn = () => {
  const userAgent = navigator.userAgent;
  // console.log(userAgent);
  if (userAgent.includes('Android') || userAgent.includes('iPhone') || userAgent.includes('iPad') || userAgent.includes('iPod')) {
    equipment.value = true
  } else {
    equipment.value = false
  }
}
// equipmentFn()
let timer: null | number = null;
onMounted(() => {
  equipmentFn()
  // 防抖函数
  const foo = () => {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      equipmentFn()
    }, 600)
  }
  window.addEventListener('resize', foo)
})

onUnmounted(() => {
  // 组件销毁时移除事件监听器
  window.removeEventListener('resize', equipmentFn);
  if (timer) clearTimeout(timer);
});


watch(() => route.fullPath, (newPath) => {
  // console.log(newPath);
  if (newPath.includes('/workLife') || newPath.includes('/study') || newPath.includes('/hobbyPart')) {
    activeTrue.value = true;
  }
  else {
    activeTrue.value = false;
  }
  if (newPath.includes('tools')) {
    toolsTrue.value = true;
    // console.log('toolsTrue', toolsTrue);
  }
  else {
    toolsTrue.value = false;
  }

  closeOffcanvas()

})


// 侧栏点击关闭
const closeOffcanvas = () => {
  const closeButtons = document.querySelectorAll('[data-bs-dismiss="offcanvas"]');
  if (closeButtons.length > 0) {
    // console.log({ closeButtons });
    (closeButtons[0] as HTMLElement).click()
  }
}
const isShowFn = () => {
  isShow.value = true;
}



</script>

<style lang="less">
.logo {
  width: 80px;
  height: 40px;

  img {
    width: 100%;
    height: 100%;

  }
}

.app-footer {
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  // background: linear-gradient(225deg,
  //     #a8e6cf 0%,
  //     #a6c1ee 40%,
  //     #fbc2eb 100%,
  //   );
  background-color: rgba(255, 255, 255, .98);

  .app-footer-bg {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;

    // align-items: center;
    align-items: flex-end;

    .box {
      width: 20%;

      i {
        // color: #fff;

        &.active {
          color: #FFA500 !important;
        }

      }

      a {
        color: #464646;
        font-size: 14px;

        &.active {
          color: #FFA500 !important;
        }
      }


    }
  }
}

html,
body {
  // font-family: 'xs' !important;
  font-family: 'ka' !important;
  width: 100%;
  height: 100%;
}

@media (max-width: 991px) {
  .offcanvas {
    background: linear-gradient(225deg,
        #a8e6cf 0%,
        #a6c1ee 40%,
        #fbc2eb 100%,
      );
  }
}



#app {
  width: 100%;
  height: 100%;
  // position: relative;

  .app-header {
    width: 100%;
    transition: all 0.5s ease;
    background-color: rgba(27, 27, 27, 0.4);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;

    &:hover {
      background-color: rgba(27, 27, 27, 0.4);
    }

    .app-btn {
      background-color: rgba(255, 255, 255, .9);
      color: #fff !important;
      box-shadow: none;
    }
  }
}

#app-nav {
  background-color: transparent !important;


  .dropdown-menu {
    background-color: rgba(255, 255, 255, .8);
  }

  .dropdown:hover .dropdown-menu {
    display: block !important;
  }

  .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.7);
  }

  .my-nav-link {
    position: relative;
    transition: color 0.3s ease;

    span {
      // margin-left: 5px;
      vertical-align: middle;
    }

    i {
      margin-right: 5px;
      color: #fff !important;
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 5px;
      background-color: #FFA500;
      transition: width 0.3s ease;
      border: none;
    }

    &:hover {
      color: #FFA500 !important;

      &::after {
        width: 100%; // 悬停时展开下划线
      }
    }

    &.active {
      color: #FFA500 !important;
      // border-bottom: 5px solid #FFA500;
    }
  }

  .app-form {

    height: 40px;

    i {

      font-size: 20px;
      transition: color 0.3s ease;
      color: #fff;

      &:hover {
        color: #FFA500 !important;
      }

      &::before {
        font-weight: 600 !important;
      }
    }
  }
}
</style>
